<template>
  <mx-link :to="`/m/topic/${obj.subjectId}`" class="topic-summary click">
    <div>
      <t-image :src="obj.thumbs" alt="" class="cover img-cover mr-16" />
    </div>

    <div>
      <p class="title ov-1">{{ obj.subjectName }}</p>
      <p class="describe ov-2">{{ obj.subjectSummary }}</p>
      <p class="num">{{ obj.contentCount || 0 }}{{ $t('xxx_content') }}</p>
    </div>
  </mx-link>
</template>

<script>
import MxLink from './MxLink.vue';
import TImage from './TImage.vue';

export default {
  components: {
    TImage,
    MxLink
  },

  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

<style lang="scss" scoped>
.topic-summary {
  width: 712px;
  height: 165px;
  padding: 24px 16px;
  display: flex;
  position: relative;

  .cover {
    width: 208px;
    height: 117px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
  }

  .title {
    width: 454px;
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
    margin-bottom: 4px;
  }

  .describe {
    font-size: 14px;
    color: rgba(12, 12, 28, 0.7);
    letter-spacing: 0;
    line-height: 20px;
  }

  .num {
    position: absolute;
    bottom: 24px;
    font-size: 12px;
    color: rgba(12, 12, 28, 0.7);
    letter-spacing: 0;
    line-height: 16px;
  }
}
</style>
